<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">视频详情</div>
    </nav-bar>

    <div class="video_main">
      <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls
             preload="auto"
            poster="@/assets/images/poster.jpg"
      >
        <source
          type="application/x-mpegURL"
        >
      </video>
    </div>

  </div>
</template>

<script>
  import Util from "@/common/util";
  import NavBar from "@/components/common/navbar/NavBar";
  import videojs from 'video.js';

  export default {
    name: "videoDetail",
    components: {
      NavBar
    },

    data() {
      return {
        myPlayer: null,
        playOptions: {
          controls: true,
          sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
           // type: 'application/x-mpegURL',
            type: 'video/mp4',
            src: '',
          }],
          controlBar: {                     // 配置控制栏
            timeDivider: false, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: false, // 进度条
            customControlSpacer: false, // 未知
            fullscreenToggle: true // 全屏
          },
          //自动播放属性,muted:静音播放
          autoplay: "false",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          // width: "375",
          // //设置视频播放器的显示高度（以像素为单位）
          // height: "auto"
        }
      }
    },

    created() {
       this.playOptions.sources[0].src = this.$route.query.sources;
       console.log('视频地址',this.playOptions.sources[0].src)
    },

    mounted() {
      this.initVideo();
    },

    destroyed() {
      this.myPlayer.dispose()
    },

    methods: {
      goBack() {
        this.$router.go(-1);
      },

      initVideo() {
        //初始化视频方法
        this.myPlayer = videojs('myVideo', this.playOptions);
      },

    }
  }
</script>

<style scoped>

</style>
